<template>
  <view class="ccca">
    <view>
      <u-swiper
        :list="getImagesLists"
        keyName="src"
        height="600rpx"
        indicator
      ></u-swiper>
    </view>
    <view
      v-for="item in getGoodsLists"
      :key="item.id"
      class="card"
    >
      <view class="price">
        <text>￥{{item.market_price}}</text>
      </view>
      <view class="name">
        {{item.title}}
      </view>
      <view style="margin-top:15rpx; font-size:20rpx">
    <view  >
        <span>商品编号：{{item.goods_no}}</span></view>
        <view >
        <span>商品库存：{{item.stock_quantity}}</span>
        </view>
        </view>
    </view>

    <view
      v-for="items in list"
      :key="items.id"
      class="card2"
    >
      <view>
        <span>详细介绍</span>
      </view>
      <view>
        <rich-text :nodes="items.content"></rich-text>
      </view>
    </view>
  <view class="goods_nav">
    <uni-goods-nav
      :fill="true"
      :options="options"
      :buttonGroup="buttonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
    />
    </view>
  </view>
</template>

<script>
import uniGoodsNav from "../../uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue";
export default {
  components: { uniGoodsNav },
  data() {
    return {
      id: null,
      getGoodsLists: [],
      getImagesLists: [],
      list: [],
      options: [
        {
          icon: "chat",
          text: "客服",
        },
        {
          icon: "shop",
          text: "店铺",
          info: 2,
          infoBackgroundColor: "#007aff",
          infoColor: "#f5f5f5",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 2,
        },
      ],
      buttonGroup: [
        {
          text: "加入购物车",
          backgroundColor: "linear-gradient(90deg, #FFCD1E, #FF8A18)",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "linear-gradient(90deg, #FE6035, #EF1224)",
          color: "#fff",
        },
      ],
    };
  },
  onLoad(option) {
    console.log(option.id);
    this.id = option.id;
    this.getGoodsList();
    this.getImagesList();
    this.getlll();
  },
  methods: {
    onClick(e) {
      uni.showToast({
        title: `点击${e.content.text}`,
        icon: "none",
      });
    },
    buttonClick(e) {
      console.log(e);
      this.options[2].info++;
    },
    getGoodsList() {
      uni.request({
        url: "http://localhost:8082/api/goods/getinfo/" + this.id,
        success: (res) => {
          // console.log(res.data.message);
          this.getGoodsLists = res.data.message;
          // console.log(this.getGoodsLists);
        },
      });
    },
    //
    getlll() {
      uni.request({
        url: "http://localhost:8082/api/goods/getdesc/" + this.id,
        success: (res) => {
          // console.log(res.data.message);
          this.list = res.data.message;
          console.log(this.list);
        },
      });
    },
    getImagesList() {
      uni.request({
        url: "http://localhost:8082/api/getthumimages/" + this.id,
        success: (res) => {
          this.getImagesLists = res.data.message;
          // console.log(this.getImagesLists);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  
.ccca{
  background-color: #eeeeee;
.card{
  width: 100%;
  height: 220rpx;
  background-color: white;

.price {
  color: red;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
}
.card2{
  margin-top: 10rpx;
  background-color: white;
}
}


.name {
  margin: 5rpx;
}
.goods_nav{
 position: fixed;
 bottom: 0;
 width: 100%;
}
</style>
